<template>
	<view>
		<!-- <image class="bgpic" style="height: 90vh;" v-if="userplus==0" src="../../static/pages_my/openVipBg.png" mode=""></image> -->
		<image src="../../static/pages_my/mybg.png" class="mybg" mode=""></image>
		<!-- <image class="bgpic" v-else src="/static/pages_my/alreadyvip.png" mode=""></image> -->
		<image @click="back" class="backImg" src="/static/pages_my/left_w.png" mode=""></image>
		<view class="info_box">
			<image class="info_boxavatar" :src="$oss(avatar)" mode=""></image>
			<view class="r">
				<view class="name">{{username}}</view>
				<view class="text" v-if="userplus==0">暂未开通会员</view>
				<view class="text" v-else>已开通会员</view>
			</view>
			<image class="mybg1" src="../../static/pages_my/mybg1.png" mode="widthFix"></image>
		</view>

		<view class="hyqy_box hytc_box">
			<view class="title">会员套餐</view>
			<view class="items">
				<view class="item" @click="choosevip(i)" :class="{act:i.id == hytcIndex}" v-for="(i,idx) in arr2"
					:key="idx">
					<view class="name" v-if="i.type==0">月度会员</view>
					<view class="name" v-if="i.type==1">季度会员</view>
					<view class="name" v-if="i.type==2">年度会员</view>
					<view class="nowMoney"><text class="fuhao">￥</text> {{i.price}}</view>
					<s class="money"><text class="fuhao">￥</text>{{i.original_price}}</s>
					<view class="tuijian">推荐</view>
				</view>
			</view>
		</view>
		<view class="hyqy_box" style="margin-top: 50rpx;">
			<view class="title">会员权益</view>
			<!-- <view class="items">
				<view class="item" v-for="(i,idx) in arr1" :key="idx">
					<image :src="i.icon" mode=""></image>
					<text>{{i.name}}</text>
				</view>
			</view> -->
			<view class="newbox">
				<image v-if="userplus==0" src="/static/pages_my/lifepic.png" class="newboximg" mode=""></image>
				<image v-else src="/static/pages_my/lifepic1.png" class="newboximg" mode=""></image>
				<view class="newbox_left">
					<view class="" style="margin-left: 30rpx;">查看更多照片特权</view>
					<u-collapse @change="change" @close="close" @open="open" :border='false'>
						<u-collapse-item title="开通摩员可获得《查看更多照片特权》" name="Docs guide">
							<text class="u-collapse-content">开通会员可获得《查看更多照片特权》，普通会员仅可查看{{config.see_image_num}}张技师相册，开通会员可以查看全部技师相册。</text>
						</u-collapse-item>
					</u-collapse>

				</view>
			</view>
			<view class="newbox">
				<image v-if="userplus==0" src="/static/pages_my/dongtai.png" class="newboximg" mode=""></image>
				<image v-else src="/static/pages_my/dongtai1.png" class="newboximg" mode=""></image>
				<view class="newbox_left">
					<view class="" style="margin-left: 30rpx;">查看更多动态权限</view>
					<u-collapse @change="change" @close="close" @open="open" :border='false'>
						<u-collapse-item title="开通会员可获得《查看更多动态特权》" name="Docs guide">
							<text class="u-collapse-content">开通会员可获得《查看更多动态特权》，普通会员仅可以查看{{config.see_dong_num}}个技师动态，开通会员可以查看全部技师动态</text>
						</u-collapse-item>
					</u-collapse>

				</view>
			</view>
			<view class="newbox">
				<image v-if="userplus==0" src="/static/pages_my/weizhi.png" class="newboximg" mode=""></image>
				<image v-else src="/static/pages_my/weizhi1.png" class="newboximg" mode=""></image>
				<view class="newbox_left">
					<view class="" style="margin-left: 30rpx;">查看技师位置特权</view>
					<u-collapse @change="change" @close="close" @open="open" :border='false'>
						<u-collapse-item title="开通会员可获得《查看技师位置特权》" name="Docs guide">
							<text class="u-collapse-content">开通会员可获得《查看技师位置特权》，开通会员后可以接查看心仪技师的位置信息</text>
						</u-collapse-item>
					</u-collapse>

				</view>
			</view>
		</view>
		<view class="" style="width: 100vw; height: 300rpx;">

		</view>
		<view class="bottom_box">
			<view class="l">
				<view class="label">需支付</view>
				<view class="val">
					<text class="fuhao">¥</text>
					<text class="nowMoney">{{newprice||0}}</text>
					<s class="money">{{oldprice||0}}</s>
				</view>
			</view>
			<view class="r" v-if="userplus==0" @click="to">立即开通</view>
			<view class="r" v-else @click="to">立即续费</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newprice: '',
				oldprice: '',
				username: '',
				avatar: '',
				arr1: [{
						name: '专享折扣',
						icon: '/static/pages_my/zxzk_icon.png'
					},
					{
						name: '专属客服',
						icon: '/static/pages_my/zskf_icon.png'
					},
					{
						name: '极速退款',
						icon: '/static/pages_my/jstk_icon.png'
					},
					{
						name: '优惠活动',
						icon: '/static/pages_my/yhhd_icon.png'
					},
				],
				arr2: [{
						name: '年度会员',
						nowMoney: 188.9,
						money: 200,
						isTui: true
					},
					{
						name: '季度会员',
						nowMoney: 88.9,
						money: 120,
						isTui: true
					},
					{
						name: '月度会员',
						nowMoney: 29.9,
						money: 33.9,
						isTui: false
					},
				],
				hytcIndex: '',
				paytype: '',
				userplus: '',
				config: ''
			}
		},
		onLoad() {
			this.plusconfig()
			this.getInfo()
			this.userconfig()
		},
		methods: {
			plusconfig() {
				this.$api.post('/plusconfig', {}).then(res => {
					this.arr2 = res.data
				})
			},
			userconfig() {
				this.$api.post('/userconfig', {}).then(res => {
					this.config = res.data
				})
			},
			getInfo() {
				this.$api.post('/index', {}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.userplus = res.data.userplus
						this.avatar = res.data.avatar
						this.username = res.data.username
					}
				}).catch((res) => {})
			},
			choosevip(item) {
				this.hytcIndex = item.id
				console.log(item);
				this.newprice = item.price
				this.oldprice = item.original_price
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			back() {
				uni.navigateBack()
			},
			to() {
				if (!this.hytcIndex) {
					this.$toast('请选择套餐~')
					return
				}
				let data = {
					allprice: this.newprice,
					oldprice: this.oldprice,
					hytcIndex: this.hytcIndex
				}
				uni.navigateTo({
					url: '/pages/payOrder/payOrder?data=' + JSON.stringify(data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background: url(/static/pages_my/openVipBg.png) no-repeat;
		background-size: 750rpx auto;
		position: relative;

		.bgpic {
			position: absolute;
			width: 100%;
			height: 100vh;
		}

		.mybg {
			position: absolute;
			width: 100%;
			height: 600rpx;
		}
	}

	.backImg {
		width: 16rpx;
		height: 32rpx;
		margin: 116rpx 0 0 32rpx;
	}

	.info_box {
		position: relative;
		display: flex;
		align-items: center;
		width: 90vw;
		margin: 301rpx auto 2rpx;

		.mybg1 {
			width: 90vw;
			position: absolute;
			bottom: -40rpx;
		}

		.info_boxavatar {
			z-index: 99;
			position: relative;
			width: 106rpx;
			height: 106rpx;
			margin: 0 30rpx;
			border-radius: 50%;
		}

		.r {
			z-index: 99;
			position: relative;

			.name {
				font-size: 32rpx;
				color: #C7C7C7;
				line-height: 45rpx;
				font-weight: bold;
				margin-bottom: 12rpx;
			}

			.text {
				font-size: 24rpx;
				color: #8D93A5;
				line-height: 33rpx;
			}
		}
	}

	.hyqy_box {
		position: relative;
		margin-top: 108rpx;
		padding: 0 52rpx;
		box-sizing: border-box;

		.title {
			position: relative;
			font-size: 32rpx;
			color: #1C274C;
			font-weight: bold;
			background: url(/static/pages_my/hyqyBg.png) no-repeat;
			background-size: 127rpx 14rpx;
			background-position: left bottom;
		}

		.newbox {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			// align-items: center;
			.newboximg {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}

			.newbox_left {
				display: flex;
				// align-items: center;
				flex-direction: column;
				flex: 1;
			}
		}

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #ADB1BF;
			margin-top: 36rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.hytc_box {
		margin-top: 70rpx;

		.items {
			.item {
				width: 192rpx;
				height: 220rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 32rpx 24rpx;
				align-items: flex-start;
				position: relative;

				.name {
					font-size: 28rpx;
					color: #1C274C;
					font-weight: bold;
				}

				.nowMoney {
					font-size: 44rpx;
					font-weight: 900;
					color: $uni-info;
					margin: 20rpx 0 6rpx;
				}

				.money {
					font-size: 24rpx;
					font-weight: 900;
					color: #C9CCD5;
				}

				.fuhao {
					font-size: 24rpx;
				}

				.tuijian {
					width: 66rpx;
					height: 28rpx;
					background: url(/static/pages_my/tjBg.png) no-repeat;
					background-size: 66rpx 28rpx;
					font-size: 20rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 28rpx;
					text-align: center;
					position: absolute;
					top: -14rpx;
				}
			}

			.act {
				background: #FEF8E2;
				border: 3rpx solid #FFBE72;
			}
		}
	}

	.bottom_box {
		width: 750rpx;
		height: 190rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEBEB;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 52rpx 0;
		box-sizing: border-box;

		.l {
			.label {
				font-size: 24rpx;
				color: #8D93A5;
			}

			.val {
				.fuhao {
					font-size: 24rpx;
					font-weight: 900;
					color: $uni-info;
				}

				.nowMoney {
					font-size: 44rpx;
					color: $uni-info;
					font-weight: 900;
				}

				.money {
					font-size: 24rpx;
					font-weight: 900;
					color: #C9CCD5;
					margin-left: 15rpx;
				}
			}
		}

		.r {
			width: 370rpx;
			height: 96rpx;
			background: #00CE9B linear-gradient(90deg, #F2CC9A 0%, #DFB173 100%);
			border-radius: 48rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #57331F;
			line-height: 96rpx;
			text-align: center;
		}
	}
</style>